<template>
  <!-- 选择设备 -->
  <a-modal :title="headerTitle" :visible.sync="dialogVisible" @cancel="handleCancel" width="1200px">
    <a-row>
      <a-col :span="22">
        <!-- 搜索 -->
        <CustomForm isValidate :formList="formList" :form="queryParam"></CustomForm>
      </a-col>
      <a-col :span="2">
        <div align="right">
          <a-button style="margin-top: 4px" type="primary" icon="search" @click="search">搜索</a-button>
        </div>
      </a-col>
    </a-row>

    <!-- 表格 -->
    <s-table
      ref="table"
      :scroll="{ y: 300 }"
      size="default"
      :rowSelection="
        isSelect
          ? {
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
              getCheckboxProps: getCheckboxProps,
            }
          : null
      "
      :footer="null"
      rowKey="id"
      :columns="columns"
      :data="loadData"
      :showPagination="false"
    >
      <!-- 插槽 -->
      <template slot="actions" slot-scope="text, record, index">
        <slot :datas="{ text, record, index }" />
      </template>
    </s-table>
    <!-- 页脚操作栏 -->
    <div v-if="!customFooter" slot="footer" class="btn_box">
      <a-button :disabled="selectedRowKeys.length === 0" type="primary" @click="handleConfirm">确定选择</a-button>
      <a-button type="primary" @click="handleCancel">关闭</a-button>
    </div>
    <slot v-if="customFooter" />
  </a-modal>
</template>

<script>
import { STable } from '@/components' // 表格

export default {
  name: 'ChooseDevice',
  components: {
    STable,
  },
  props: {
    // 显隐控件
    visible: {
      type: Boolean,
      default: () => false,
    },
    // 表格是否可选
    isSelect: {
      type: Boolean,
      default: () => true,
    },
    // 是否自定义页脚
    customFooter: {
      type: Boolean,
      default: () => false,
    },
    // 标题
    headerTitle: {
      type: String,
      default: () => '选择设备',
    },
    // 列表api
    api: {
      type: Object,
      default() {
        return null
      },
    },
    // 列表api请求axios
    loadList: {
      type: String,
      default: () => 'history',
    },
    // 搜索表单参数
    queryParam: {
      type: Object,
      default: () => ({}),
    },
    // 搜索表单列表
    formList: {
      type: Array,
      default: () => [],
    },
    // 复选框属性配置
    getCheckboxProps: {
      type: Function,
      default: () => {},
    },
    // 表头
    columns: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    visible(e) {
      if (e) {
        this.$nextTick(() => {
          // 请求表格列表
          this.$refs.table.refresh(true)
        })
      }
    },
  },
  computed: {
    // 与父组件绑定visible
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (e) {
        this.$emit('update:visible', e)
      },
    },
  },
  data() {
    return {
      loadData: () => {
        if (this.api) {
          const requestParameters = Object.assign({}, this.queryParam)
          return this.api[this.loadList](requestParameters).then((res) => {
            if (this.selectedRowKeys.length > 0) {
              // 清空选择项
              this.$refs.table.clearSelected()
            }
            return res
          })
        }
      }, // 表格异步数据
      selectedRowKeys: [], // 表格选中行数组rowKey
      selectedRows: [], // 表格选中行数组对象
    }
  },
  methods: {
    /**
     * 搜索
     */
    search() {
      this.$refs.table.refresh(true)
    },
    /**
     * 确认选择
     */
    handleConfirm() {
      this.$emit('confirm', this.selectedRows)
    },
    /**
     * 关闭弹窗
     */
    handleCancel() {
      this.dialogVisible = false
    },
    /**
     * 表格复选操作
     */
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys // 表格选中行数组rowKey
      this.selectedRows = selectedRows // 表格选中行数组对象
    },
  },
}
</script>
